<template>
  <div class="covenant">
    <el-card>
      <div class="introduce-area">
        <div class="title">报名须知和承诺书</div>
        <div class="desc">您可以新增或编辑报名须知和承诺书，并且可以对他们的状态进行更改！</div>
      </div>
    </el-card>

    <el-card>
      <div class="radio-button">
        <span>功能启停&nbsp;&nbsp;</span>
        <div class="radio-style">
          <el-radio v-model="form.Status" :label="1">启用</el-radio>
          <el-radio v-model="form.Status" :label="0">停用</el-radio>
        </div>

      </div>
      <el-form
        ref="formRef"
        :model="form"
        label-width="100px"
        element-loading-text="拼命加载中......"
        v-loading="loading"
      >
        <el-form-item label="报名须知">
          <tinymce :default-content="form.Instructions" @change="instructionsChange"></tinymce>
        </el-form-item>
        <el-form-item label="承诺书">
          <tinymce :default-content="form.Commitments" @change="tinymceChange"></tinymce>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitInfo" class="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
//导入新网络请求的类
import Covenant from '@/model/covenant'
//引入富文本编辑器组件
import Tinymce from '@/components/base/tinymce/index'

export default {
  name: 'Covenant',
  components: {
    Tinymce
  },
  data () {
    return {
      //新增和修改绑定的表单
      form: {
        Commitments: '',
        Instructions: '',
        Status: null
      },
      loading:false

    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    //获取信息
    async getInfo () {
      this.loading=true
      const res = await Covenant.getInfo()
      this.loading=false
      console.log(res)
      this.form.Status = res.Status
      this.form.Commitments = res.Commitments
      this.form.Instructions = res.Instructions
    },
    //点击提交按钮时触发
    async submitInfo () {
      this.loading=true
      //先进行新增操作
      const res = await Covenant.addAndEdit(this.form)
      this.loading=false
      //进行成功的后续操作即可
      this.$message.success('操作成功!')
      await this.getInfo()
    },
    //当富文本编辑器内容发生改变时触发
    //报名须知方法自带回调参数
    instructionsChange (instructionsValue) {
      this.form.Instructions = instructionsValue
    },
    //承诺书方法
    tinymceChange (tinymceValue) {
      this.form.Commitments = tinymceValue
    }

  },

}
</script>

<style scoped>

.covenant {
  background-color: #eee;
}

.el-card {
  margin-top: 20px;
  box-shadow: none;
}

.introduce-area {
  padding: 20px 0;
  border-bottom: 1px solid #4c76af;
  margin-bottom: 20px;
}

.introduce-area .title {
  font-size: 20px;
  font-weight: bold;
}

.introduce-area .desc {
  margin-top: 20px;
  font-size: 14px;
  color: #DC143C;
}

/deep/ .el-form-item__content {
  width: 50%;
}
/deep/ .el-form-item__label {
  font-weight: bold;
}

.submit {
  position: absolute;
  right: 0;
}

.radio-button {
  margin-bottom: 40px;
  display: flex;
  margin-left: 20px;
}

.radio-button span {
  font-weight: bold;
  font-size: 14px;
}

.radio-style {
  display: block;
  margin-left: 17px;
}

</style>
